<template>
    <div class="header" ref="headerDiv">
        <div class="hide-menu" @click="collapseChange">
            <i class="el-icon-s-fold"></i>
        </div>
        <div class="header-right">
            <!--右侧下拉框-->
            <el-dropdown @command="handleCommand">
                <div class="avatar">
                    <el-avatar :size="size" :src="circleUrl" alt="用户头像" :key="circleUrl">
                        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="失败头像"/>
                    </el-avatar>
                    <small v-text="name" class="user-name">VUE</small>
                </div>
                <!-- 用户名下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="profile" icon="fa fa-user">个人中心</el-dropdown-item>
                    <el-dropdown-item command="modifyPassword" icon="fa fa-key">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout" icon="fa fa-sign-out" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible"
                   :modal-append-to-body="false" width="30%">
            <el-form :model="modifyPasswordForm" ref="modifyPasswordForm" label-width="100px"
                     :rules="modifyPasswordRules"
                     size="small ">
                <el-form-item label="用户名">
                    <el-input v-model="userInfo.userName" placeholder="用户名" disabled></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPassWord">
                    <el-input v-model="modifyPasswordForm.oldPassWord" placeholder="请输入旧密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassWord">
                    <el-input v-model="modifyPasswordForm.newPassWord" placeholder="请输入新密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="modifyPasswordForm.confirmPassword" placeholder="请确认密码" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.dialogFormVisible = false" size="medium"> 取 消</el-button>
                <el-button type="primary" @click="submitModifyPassword" size="medium"> 保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component, Provide, Ref, Vue} from "vue-property-decorator";
    import {Action, Getter} from "vuex-class";
    import {MyDialog} from "*.vue";
    import {logout} from "@/api/login";
    import {modifyPassword} from '@/api/profile';

    @Component
    export default class Header extends Vue {
        @Action("setCollapse") private setCollapse!: (collapse: boolean) => void;
        @Action("LogOut") private LogOut!: () => Promise<any>;
        @Getter("collapse") private collapse: any;
        @Getter("avatar") private circleUrl!: string;
        @Getter("userInfo") private userInfo!: any;
        @Ref("headerDiv") private headerDiv: any;
        @Getter("name") private name!: string;
        @Getter("device") private device!: string;
        @Provide() private size: string = "large";
        @Provide() private dialog: MyDialog = {
            dialogFormVisible: false,
            title: "修改密码",
        };

        @Provide() private modifyPasswordForm: {
            oldPassWord: string,
            newPassWord: string,
            confirmPassword: string
        } = {
            oldPassWord: "",
            newPassWord: "",
            confirmPassword: ""
        };

        private validatePass = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            }else if (value !== this.modifyPasswordForm.oldPassWord) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        @Provide() private modifyPasswordRules: any = {
            oldPassWord: [
                {required: true, message: "原密码不能为空", trigger: ["blur"]}
            ],
            newPassWord: [
                {required: true, message: "新密码不能为空", trigger: ["blur"]}
            ],
            confirmPassword: [
                {required: true, message: "确认密码不能为空", trigger: ["blur"]},
                {validator: this.validatePass, trigger: "blur"}
            ],
        };


        collapseChange() {
            this.setCollapse(!this.collapse);
        }

        handleCommand(command: string) {
            if (command === "logout") {
                this.$confirm("确定退出登录?", "退出登录", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    return this.LogOut();
                }).then(() => {
                    location.reload();
                }).catch((e) => {
                    console.log(e);
                });
            } else if (command === "profile") {
                this.$router.push("/user/profile").catch((e) => {
                    console.log(e);
                });
            } else if (command === "modifyPassword") {
                this.dialog.dialogFormVisible = true;
            }
        }

        submitModifyPassword() {
            (this.$refs.modifyPasswordForm as any).validate((valid: boolean) => {
                if (valid) {
                    modifyPassword({
                        "oldPassWord": this.modifyPasswordForm.oldPassWord,
                        "newPassWord": this.modifyPasswordForm.newPassWord
                    }).then((response: any) => {
                        this.dialog.dialogFormVisible = false;
                        this.$message.success(response.msg);
                        setTimeout(() => {
                            this.LogOut().then(() => {
                                location.reload();
                            }).catch((err: any) => {
                                console.log(err);
                            });
                        }, 1000);
                    }).catch((e) => {
                        console.log(e);
                    });
                }
            });
        }
    }
</script>

<style scoped lang="scss">
    .header {
        height: 50px;
        background-color: #4AB7BD;


        .hide-menu {
            color: #ffffff;
            float: left;
            cursor: pointer;
            padding: 15px;
            line-height: 20px;
        }


        .header-right {
            float: right;
            cursor: pointer;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;

            /*      &:hover {
                      background-color: #367fa9;
                  }*/

            .avatar {
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                margin: auto 20px auto 20px;

                .user-name {
                    margin-left: 10px;
                    display: block
                }
            }
        }
    }
</style>
